<template>
  <div>
    <div v-for="(item, index) in mods" :key="index" style="margin-bottom: 40px">
      <div>
        <h3 style="margin-bottom: -16px; margin-left: 6px">{{ item.group_name }}</h3>
        <el-divider />
      </div>
      <div class="card-wrap">
        <div class="card-item" v-for="(item1, index1) in item.mods" :key="index1">
          <div class="info" @click="modClick(item1)" :title="'点击进入' + item1.mod_name">
            <component class="icons" :is="item1.icon" width="36" height="36" :color="item1.icon_color"></component>
            <div class="right">
              <div class="name">{{ item1.mod_name }}</div>
              <div class="desc">{{ item1.remark }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getUserMod } from "@/api/modules/system";

const router = useRouter();

const mods = ref([{ group_name: "", mods: [] as any }]);

const initMod = async () => {
  let { data } = await getUserMod();
  mods.value = data as any;
};

const modClick = row => {
  router.push({ path: `/mod/data/${row.mod_id}`, query: { modName: row.mod_name, modIcon: row.icon } });
};

//初始化
onMounted(async () => {
  await initMod();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
